import React, { useEffect, useState } from 'react'
import { useSelector,useDispatch } from 'react-redux'
import type { RootState, AppDispatch } from '../../../../store/index'
import { getMusic } from '../../../../store/models/music'
import style from './Left.module.scss'
import classNames from 'classnames'
const Left:React.FC = () => {
  const dispatch:AppDispatch = useDispatch()
  const list = useSelector((state:RootState) => state.music.musicList )
  const [curIndex,setCurIndex] = useState(-1)
  console.log(list)
  useEffect(() => {
    dispatch(getMusic())
  },[])

  useEffect(() => {
    const mouseup = () => setCurIndex(-1)
    document.addEventListener('mousedown',mouseup)
  })
  
  // const 
  

  return (
    <div className={style.left}>
      {list.map((item,index) => 
        <p 
        className={classNames(style.keyTrigger,{[style.active]:index === curIndex})} 
        key={item.id}
        onMouseDown={() => setCurIndex(index)}
        >
          {item.keyTrigger}
        </p>
      )}
    </div>
  )
}

export default Left